  <template>

    

<div class="declarationFormVue">

  <h2>中华人民共和国海关出口货物报关单</h2>

  <div class="head">

    <export-excel module-name="documentprocess_cc_declarationForm" file-name="中华人民共和国海关出口货物报关单.xlsx"></export-excel>

    <div class="tcf-table">
      <div class="tcf-table-in">
        <table>
          <tr>
            <td colspan="6"><p>预录入编号：</p></td>
            <td colspan="6"><input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_enterNO" placeholder="请输入内容"></td>
            <td colspan="6"><p>海关编号：</p></td>
            <td colspan="6"> <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_hscode" placeholder="请输入内容"></td>
          </tr>
        </table>
        <table>
          <tr>
            <td rowspan="2" colspan="3"><p>境内发货人</p></td>
            <td rowspan="2" colspan="6">
              <el-input type="textarea" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_domesticConsignor" placeholder="请输入内容"></el-input>
            </td>
            <td colspan="3"><p>出境关别</p></td>
            <td colspan="6"><p>出口日期</p></td>
            <td colspan="3"><p>申报日期</p></td>
            <td colspan="3"><p>备案号</p></td>
          </tr>
          <tr>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_exitCustoms" placeholder="请输入内容">
            </td>
            <td colspan="6">
              <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"  @change="selectDate"   type="date" v-model="documentprocess_cc_df_exportDate" ></el-date-picker>
            </td>
            <td colspan="3">
              <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"  @change="selectDate"   type="date" v-model="documentprocess_cc_df_applyDate"></el-date-picker>
            </td>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_recordNumber" placeholder="请输入内容">
            </td>
          </tr>
          <tr>
            <td rowspan="2" colspan="3"><p>境外收货人</p></td>
            <td rowspan="2" colspan="6">
              <el-input type="textarea" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_overseasConsignee" placeholder="请输入内容"></el-input>
            </td>
            <td colspan="3"><p>运输方式</p></td>
            <td colspan="6"><p>运输工具名称及航次号</p></td>
            <td colspan="6"><p>提运单号</p></td>
          </tr>
          <tr>
            <td colspan="3">
             <!-- <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_transport" placeholder="请输入内容">-->
              <el-select   @change="handleSimpleSelect"  :disabled="!editable" v-model="documentprocess_cc_df_transport" placeholder="请选择">
                <el-option
                        label="水路运输"
                        value="水路运输">
                </el-option>
                <el-option
                        label="航空运输"
                        value="航空运输">
                </el-option>
                <el-option
                        label="公路运输"
                        value="公路运输">
                </el-option>
                <el-option
                        label="铁路运输"
                        value="铁路运输">
                </el-option>
              </el-select>
            </td>
            <td colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_conveyanceAndVoyageNumber" placeholder="请输入内容">
            </td>
            <td colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_delNO" placeholder="请输入内容">
            </td>
          </tr>
          <tr>
            <td rowspan="2" colspan="3"><p>生产销售单位</p></td>
            <td rowspan="2" colspan="6">
              <el-input type="textarea" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_company" placeholder="请输入内容"></el-input>
            </td>
            <td colspan="3"><p>监管方式</p></td>
            <td colspan="6"><p>征免性质</p></td>
            <td colspan="6"><p>许可证号</p></td>
          </tr>
          <tr>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_supervisionMode" placeholder="请输入内容">
            </td>
            <td colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_exemptingNature" placeholder="请输入内容">
            </td>
            <td colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_license" placeholder="请输入内容">
            </td>
          </tr>
          <tr>
            <td colspan="6"><p>合同协议号</p></td>
            <td colspan="6"><p>贸易国(地区)</p></td>
            <td colspan="6"><p>运抵国(地区)</p></td>
            <td colspan="3"><p>指运港</p></td>
            <td colspan="3"><p>离境口岸</p></td>
          </tr>
          <tr>
            <td  colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_contractNO" placeholder="请输入内容">
            </td>
            <td  colspan="6">
              <input type="text" @input="handleRelateInput('documentprocess_cc_df_tradeCountry', $event)" :readonly="!editable" v-model="documentprocess_cc_df_tradeCountry" placeholder="请输入内容">
            </td>
            <td  colspan="6">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_destCountry" placeholder="请输入内容">
            </td>
            <td  colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_specPort" placeholder="请输入内容">
            </td>
            <td  colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_departurePort" placeholder="请输入内容">
            </td>
          </tr>
          <tr><!--标题行-->
            <td colspan="3"><p>包装种类</p></td>
            <td colspan="3"><p>件数</p></td>
            <td colspan="3"><p>毛重(千克)</p></td>
            <td colspan="3"><p>净重(千克)</p></td>
            <td colspan="3"><p>成交方式</p></td>
            <td colspan="3"><p>运费</p></td>
            <td colspan="3"><p>保费</p></td>
            <td colspan="3"><p>杂费</p></td>
          </tr>
          <tr><!--输入行-->
            <td  colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_cartons" placeholder="请输入内容">
            </td>
            <td  colspan="3">
              <input type="number" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_numbers" placeholder="请输入内容">
            </td>
            <td  colspan="3">
              <input type="number" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_grossWeight" placeholder="请输入内容">
            </td>
            <td  colspan="3">
              <input type="number" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_netWeight" placeholder="请输入内容">
            </td>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_tradeTerms" placeholder="请输入内容">
            </td>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_freight" placeholder="请输入内容">
            </td>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_premium" placeholder="请输入内容">
            </td>
            <td colspan="3">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_otherCharge" placeholder="请输入内容">
            </td>
          </tr>
          <tr>
            <td colspan="6"><p>随附单证及编号</p></td>
            <td colspan="18">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_attachBills" placeholder="请输入内容">
            </td>
          </tr>
          <tr>
            <td colspan="6"><p>标记唛码及备注</p></td>
            <td colspan="18">
              <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_df_shippingMarks" placeholder="请输入内容">
            </td>
          </tr>
        </table>

        <el-table :data="documentprocess_cc_df_table" border style="width: 100%">
          <el-table-column type="index" label="项号" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_df_productNO" label="商品编号">
            <template slot-scope="scope">
              <input  type="text" @input="handleTableInput(scope, 'documentprocess_cc_df_productNO', $event)"
                      :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productNO" placeholder="商品编号" />
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_productName" label="商品名称">
            <template slot-scope="scope">
              <input  type="text" @input="handleTableInput(scope, 'documentprocess_cc_df_productName', $event)"
                      :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productName" placeholder="商品名称" />
            </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_df_productDesc" label="规格型号">
            <template slot-scope="scope">
              <input  type="text" @input="handleTableInput(scope, 'documentprocess_cc_df_productDesc', $event)"
                      :readonly="!editable" v-model="scope.row.documentprocess_cc_df_productDesc" placeholder="商品规格" />
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_quantityAndUnit" label="数量及单位">
            <template slot-scope="scope">
              <div class="has-unit">
                <el-row>
                  <el-col :span="16">
                    <input type="number"  :min="0"  :readonly="!editable"
                           @input="handleTableInput(scope, 'documentprocess_cc_df_quantityAndUnit-0', $event)"
                           v-model="scope.row.documentprocess_cc_df_quantityAndUnit[0]" />
                  </el-col>
                  <el-col :span="8">
                    <input type="text" :readonly="!editable"
                           @input="handleTableInput(scope, 'documentprocess_cc_df_quantityAndUnit-1', $event)"
                           v-model="scope.row.documentprocess_cc_df_quantityAndUnit[1]" />
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_weightAndUnit" label="净重及单位">
            <template slot-scope="scope">
              <div class="has-unit">
                <el-row>
                  <el-col :span="12">
                    <input type="number"  :min="0"  :readonly="!editable"
                           @input="handleTableInput(scope, 'documentprocess_cc_df_weightAndUnit-0', $event)"
                           v-model="scope.row.documentprocess_cc_df_weightAndUnit[0]" />
                  </el-col>
                  <el-col :span="12">
                    <input type="text" :readonly="!editable"
                           @input="handleTableInput(scope, 'documentprocess_cc_df_weightAndUnit-1', $event)"
                           v-model="scope.row.documentprocess_cc_df_weightAndUnit[1]" />
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_price" label="单价">
            <template slot-scope="scope">
              <input  type="number" @input="handleTableInput(scope, 'documentprocess_cc_df_price', $event)"
                      :readonly="!editable" v-model="scope.row.documentprocess_cc_df_price" placeholder="请输入内容" />
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_amount" label="总价">
            <template slot-scope="scope">
              <input type="number"  :min="0" :readonly="!editable"
                     @input="handleTableInput(scope, 'documentprocess_cc_df_amount', $event)"
                     v-model="scope.row.documentprocess_cc_df_amount" />
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_currency" label="币制">
            <template slot-scope="scope">
              <el-select   @change="handleSimpleSelect"  :disabled="!editable" v-model="scope.row.documentprocess_cc_df_currency" placeholder="请选择">
                <el-option
                        label="人民币"
                        value="人民币">
                </el-option>
                <el-option
                        label="美元"
                        value="美元">
                </el-option>
                <el-option
                        label="加元"
                        value="加元">
                </el-option>
                <el-option
                        label="欧元"
                        value="欧元">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_df_countryOrigin" label="原产国">
            <template slot-scope="scope">
              <input type="text"  :readonly="!editable"
                     @input="handleTableInput(scope, 'documentprocess_cc_df_countryOrigin', $event)"
                     v-model="scope.row.documentprocess_cc_df_countryOrigin"/>
            </template>
          </el-table-column>
          <el-table-column
                  v-if="editable"
                  label="操作"
                  width="100">
            <template slot-scope="scope">
              <el-button @click="addNewLine(scope.$index, documentprocess_cc_df_table)" type="text" size="small">添加</el-button>
              <el-button @click="removeCurrentLine(scope.$index, documentprocess_cc_df_table)" type="text" size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

    </div>

    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>

  </div>


</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import { handleEmit } from '../common.js'; 

import exportExcel from '../../../common/exportExcel.vue';

export default {
  created() {


    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });


  },

  mounted(){

    let self = this;

    this.bus.$on('bind-new-ftc', function (ftcData) {
      self.documentprocess_cc_df_contractNO = ftcData.bf_orderNumber;
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_declarationForm-transport", function(arg){
      self.documentprocess_cc_df_transport = arg[0];
      self.emitToParent();
    });

    //接收报关发票的 表格整体改变
    this.bus.$on("documentprocess_cc_declarationForm-table-all", function(arg){
      let srcTable = arg[0], destTable = [];

      for (let i = 0; i < srcTable.length; i ++) {
          destTable[i] = {
              documentprocess_cc_df_productNO: '',
              documentprocess_cc_df_productName: srcTable[i].documentprocess_cc_cdi_products,
              documentprocess_cc_df_productDesc: srcTable[i].documentprocess_cc_cdi_description,
              documentprocess_cc_df_quantityAndUnit: [srcTable[i].documentprocess_cc_cdi_quantity, '个'],
              documentprocess_cc_df_weightAndUnit: [0, 'KGS'],
              documentprocess_cc_df_destnationContry: self.documentprocess_cc_df_tradeCountry,
              documentprocess_cc_df_price: srcTable[i].documentprocess_cc_cdi_price,
              documentprocess_cc_df_amount: srcTable[i].documentprocess_cc_cdi_lineAmount,
              documentprocess_cc_df_currency: '人民币',
              documentprocess_cc_df_LevyExemption: '照章',
              documentprocess_cc_df_countryOrigin: srcTable[i].documentprocess_cc_df_countryOrigin, //原产国(新添属性)
          };
      }
      self.documentprocess_cc_df_table = destTable;

      handleEmit(null, () => {
        self.emitToParent();

        //通知 向工厂索要发票
        self.emitToNext("documentprocess_askInvoice-table-all", destTable);
      });
    });


    this.bus.$on("documentprocess_cc_declarationForm-tradeCountry", function(arg){
      self.documentprocess_cc_df_tradeCountry = arg[0];
      self.documentprocess_cc_df_destCountry = arg[0];
      self.documentprocess_cc_df_specPort = arg[0];

      let temp = _.cloneDeep(self.documentprocess_cc_df_table);

      temp.forEach(line => {
        line.documentprocess_cc_df_destnationContry = arg[0];
      });

      self.documentprocess_cc_df_table = temp;
      self.emitToParent()
    });


    //接收报关发票的表格 输入改变
    this.bus.$on("documentprocess_cc_declarationForm-table-line" , function(arg){
        let index = arg[0], key = self.prevMapCur[arg[1]], value = arg[2];

        if (index  <= (self.documentprocess_cc_df_table.length - 1)) {
          let temp = _.cloneDeep(self.documentprocess_cc_df_table[index]), result;
          
          switch(key){
            case 'documentprocess_cc_df_productName':
            case 'documentprocess_cc_df_productDesc':
            temp[key] = value;
            self.emitToNext("documentprocess_askInvoice-table-line", index, key, temp[key]);
            break;
            

            case 'documentprocess_cc_df_price':
            temp[key] = toFixed(value);
            result  = Number(temp[key]) * Number(temp.documentprocess_cc_df_quantityAndUnit[0]);
            temp.documentprocess_cc_df_amount = toFixed(self.handleIsNaN(result));
            self.emitToNext("documentprocess_askInvoice-table-line", index, key, temp[key]);
            break;

            case 'documentprocess_cc_df_quantityAndUnit':
            temp[key][0] = self.handleIsNaN(parseInt(value));
            self.emitToNext("documentprocess_askInvoice-table-line", index, "documentprocess_cc_df_quantityAndUnit-0" , temp[key][0]);
            break;

            case 'documentprocess_cc_df_amount':
            temp.documentprocess_cc_df_amount = toFixed(value);
            self.emitToNext("documentprocess_askInvoice-table-line", index, key, temp[key]);
            break;
          }
          self.documentprocess_cc_df_table.splice(index, 1, temp);
          self.emitToParent();
        }
    });

    //接收报关发票的表格 添加或者删除
    this.bus.$on("documentprocess_cc_declarationForm-table", function(arg){

      let index = arg[1], srcData = arg[2];
      if (arg[0] === 'add') {
          //添加
          let  data = {
              documentprocess_cc_df_productNO: '',
              documentprocess_cc_df_productName: srcData.documentprocess_cc_cdi_products,
              documentprocess_cc_df_productDesc: srcData.documentprocess_cc_cdi_description,
              documentprocess_cc_df_quantityAndUnit: [srcData.documentprocess_cc_cdi_quantity, '个'],
              documentprocess_cc_df_weightAndUnit: [0, 'KGS'],
              documentprocess_cc_df_destnationContry: self.documentprocess_cc_df_tradeCountry,
              documentprocess_cc_df_price: srcData.documentprocess_cc_cdi_price,
              documentprocess_cc_df_amount: srcData.documentprocess_cc_cdi_lineAmount,
              documentprocess_cc_df_currency: '人民币',
              documentprocess_cc_df_LevyExemption: '照章',
              documentprocess_cc_df_countryOrigin: srcData.documentprocess_cc_df_countryOrigin, //原产国(新添属性)
          }; 

          if ((index - self.documentprocess_cc_df_table.length) >= 1) {
            self.documentprocess_cc_df_table.push(data);
          } else {
            self.documentprocess_cc_df_table.splice(index, 0, data);
          }

          self.emitToNext("documentprocess_askInvoice-table", "add" ,index, data);
        } else if(arg[0] === 'delete'){
          //删除
          if (self.documentprocess_cc_df_table.length - 1 >= index) {
            self.documentprocess_cc_df_table.splice(index, 1);
            self.emitToNext("documentprocess_askInvoice-table", "delete" ,index);
          }
        }

        self.emitToParent();
    });

    //接收 报关箱单表格中的 netweight 变化
    this.bus.$on("documentprocess_cc_declarationForm-table-netweight", function(arg){
        let index = arg[0], value = arg[2];
        if (index  <= (self.documentprocess_cc_df_table.length - 1)) {
          let temp = _.cloneDeep(self.documentprocess_cc_df_table[index]);
          temp.documentprocess_cc_df_weightAndUnit[0] = toFixed(value);
          self.documentprocess_cc_df_table.splice(index, 1, temp);
          self.emitToParent();
        }
    });


    //当报关箱单中 添加行时， 当前表格中关联的 重量值需要变化
    this.bus.$on("documentprocess_cc_declarationForm-table-netweight-frombox", function(arg){
        let index = arg[0], value = arg[1];
        if (index  <= (self.documentprocess_cc_df_table.length - 1)) {
          let temp = _.cloneDeep(self.documentprocess_cc_df_table[index]);
          temp.documentprocess_cc_df_weightAndUnit[0] = toFixed(value);
          self.documentprocess_cc_df_table.splice(index, 1, temp);
          self.emitToParent();
        }
    });

    //接收报关箱单
    this.bus.$on("documentprocess_cc_declarationForm-totalpackage", function(arg){
      self.documentprocess_cc_df_numbers = arg[0];
      self.emitToParent();
    });

    //接收报关箱单
    this.bus.$on("documentprocess_cc_declarationForm-totalnet", function(arg){
      self.documentprocess_cc_df_netWeight = arg[0];
      self.emitToParent();
    });

    //接收报关箱单
    this.bus.$on("documentprocess_cc_declarationForm-totalgross", function(arg){
      self.documentprocess_cc_df_grossWeight = arg[0];
      self.emitToParent();
    });

    //接收报关发票
    this.bus.$on("documentprocess_cc_declarationForm-tradeterms", function(arg){
      self.documentprocess_cc_df_tradeTerms = arg[0];
      self.emitToParent();
    });

    //接收报关箱单 package 的单位变化
    this.bus.$on("documentprocess_cc_declarationForm-totalpackage-unit", function(arg){
      self.documentprocess_cc_df_cartons = arg[0];
    });
  },
  updated() {

  },
  methods: {


    /** 
     * 更新数据到单证员报关
     */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromDF", "documentprocess_cc_declarationForm", obj);
    },

    /**
     * 将对应的数据传递给下一个组件
     * @param {String} eventName  事件名称
     * @param {Array} arg   传递的参数
    */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },


    

    /**
     * 处理NaN的数据
     */
    handleIsNaN(value){
      if (Number.isNaN(value)){
        return 0;
      } else {
        return value;
      }
    },

     /**
     * 计算表格 列和
     * @param {String} type
     */
    computeTableTotal(type){
      if (type === 'amount'){
        let amount = 0;
        this.documentprocess_cc_df_table.forEach(line => {
          amount += Number(line.documentprocess_cc_df_amount);
        });
        return toFixed(this.handleIsNaN(amount));
      }
    },


    /**
     * 处理表格的输入
     */
    handleTableInput(scope, key, value){
      let oldData = _.cloneDeep(this.documentprocess_cc_df_table[scope.$index]), temp = 0;

      switch(key){
        case 'documentprocess_cc_df_quantityAndUnit-0':
        oldData.documentprocess_cc_df_quantityAndUnit[0] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
        temp = Number(oldData.documentprocess_cc_df_quantityAndUnit[0]) * Number(oldData.documentprocess_cc_df_price);
        oldData.documentprocess_cc_df_amount = toFixed(this.handleIsNaN(temp));
        this.documentprocess_cc_df_table.splice(scope.$index, 1, oldData);
        break;

        case  'documentprocess_cc_df_price':
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
           oldData[key] =  event.target.value;
        } else {
           oldData[key] =  toFixed(event.target.value);
        }
        temp = Number(oldData.documentprocess_cc_df_quantityAndUnit[0]) * Number(oldData.documentprocess_cc_df_price);
        oldData.documentprocess_cc_df_amount = toFixed(this.handleIsNaN(temp));
        this.documentprocess_cc_df_table.splice(scope.$index, 1, oldData);
        break;

        case  'documentprocess_cc_df_amount':
          if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
            oldData[key] =  event.target.value;
          } else {
            oldData[key] =  toFixed(event.target.value);
          }
          this.documentprocess_cc_df_table.splice(scope.$index, 1, oldData);
          break;
      }

      this.emitToParent();

      //通知向工厂索要发票
      this.emitToNext("documentprocess_askInvoice-table-line", scope.$index, key, event.target.value);
    },


    selectDate(value){
      this.emitToParent();
    },

    handleSimpleSelect(value){
      this.emitToParent();
    },

    handleSimpleInput(){
      this.emitToParent();
    },

    /**
     * 处理有关联的数据
     */
    handleRelateInput(key, event){
      if (key === 'documentprocess_cc_df_tradeCountry'){
        let temp = _.cloneDeep(this.documentprocess_cc_df_table);

        temp.forEach(line => {
          line.documentprocess_cc_df_destnationContry = event.target.value;
        });

        this.documentprocess_cc_df_table = temp;
        this.emitToParent();
      }
    },

    indexMethod(value) {
      return value + 1;
    },

    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event){
      //票据附件
      let self = this;
      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
        
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    handleTableNumberChange(){
      this.updateTable();
      this.$forceUpdate();
    },

    addNewLine(currentIndex, table){
      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};
      let keys = [
          "documentprocess_cc_df_productNO",
          "documentprocess_cc_df_productName",
          "documentprocess_cc_df_productDesc",
          "documentprocess_cc_df_quantityAndUnit",
          "documentprocess_cc_df_weightAndUnit",
          "documentprocess_cc_df_destnationContry",
          "documentprocess_cc_df_price",
          "documentprocess_cc_df_amount",
          "documentprocess_cc_df_currency",
          "documentprocess_cc_df_LevyExemption",
          "documentprocess_cc_df_countryOrigin"//原产国
      ];

      keys.forEach(key => {
        newLine[key] = lastLine[key];
      });

      table.splice(currentIndex + 1, 0, newLine);
      handleEmit(null, ()=> {
        this.emitToParent();
        //通知 向工厂所要发票
        this.emitToNext("documentprocess_askInvoice-table", "add", currentIndex + 1, newLine);
      });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
        handleEmit(null, ()=> {
          this.emitToParent();
         //通知 向工厂所要发票
         this.emitToNext("documentprocess_askInvoice-table", "delete", currentIndex + 1);
        });
      }
    },
  },

  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: [], //附件
      documentprocess_cc_df_enterNO: '', //录入编号
      documentprocess_cc_df_hscode: '', //海关编号
      documentprocess_cc_df_company: '', //单位
      documentprocess_cc_df_exportPort: '', //出口口岸
      documentprocess_cc_df_exportDate: '', //出口日期
      documentprocess_cc_df_applyDate: '', //申请日期
      documentprocess_cc_df_transport: '', //运输方式
      documentprocess_cc_df_transportTool: '', //运输工具
      documentprocess_cc_df_delNO: '', //提运单号
      documentprocess_cc_df_recordNO: '', //备案号
      documentprocess_cc_df_tradeCountry: '', //贸易国
      documentprocess_cc_df_destCountry: '', //运抵国
      documentprocess_cc_df_specPort: '', //指运港
      documentprocess_cc_df_yardGoods: '', //境内货源
      documentprocess_cc_df_license: '', //许可证
      documentprocess_cc_df_tradeTerms: '', //成交方式
      documentprocess_cc_df_freight: '', //运费
      documentprocess_cc_df_premium: '', //保费
      documentprocess_cc_df_otherCharge: '', //杂费
      documentprocess_cc_df_contractNO: '', //合同编号
      documentprocess_cc_df_numbers: '', //件数
      documentprocess_cc_df_cartons: 'PKGS', //包装种类
      documentprocess_cc_df_grossWeight: '', //毛重
      documentprocess_cc_df_netWeight: '', //净重
      documentprocess_cc_df_containerNO: '', //集装箱号
      documentprocess_cc_df_attachBills: '', //随附单据
      documentprocess_cc_df_manufacturer: '', //生产厂家
      documentprocess_cc_df_marks: '', //标记
      documentprocess_cc_df_table: [
        {
            documentprocess_cc_df_productNO: '', //商品编号
            documentprocess_cc_df_productName: '', //商品名称
            documentprocess_cc_df_productDesc: '', //商品描述
            documentprocess_cc_df_quantityAndUnit: [0, '个'], //数量个数 以及 单位
            documentprocess_cc_df_weightAndUnit: [0, 'KGS'], //重量 以及 单位
            documentprocess_cc_df_destnationContry: '', //最终运抵国
            documentprocess_cc_df_price: '', //单价
            documentprocess_cc_df_amount: '', //总价
            documentprocess_cc_df_currency: '人民币', //货币
            documentprocess_cc_df_LevyExemption: '照章', //征免
            documentprocess_cc_df_countryOrigin: '', //原产国(新添属性)
        }
      ],
        /*新添属性*/
        documentprocess_cc_df_domesticConsignor: '', //境内发货人
        documentprocess_cc_df_exitCustoms: '', //出境关别
        documentprocess_cc_df_recordNumber: '', //备案号
        documentprocess_cc_df_overseasConsignee: '', //境外收货人
        documentprocess_cc_df_conveyanceAndVoyageNumber: '', //运输工具名称及航次号
        documentprocess_cc_df_supervisionMode: '', //监管方式
        documentprocess_cc_df_exemptingNature: '', //征免性质
        documentprocess_cc_df_departurePort: '', //离境口岸
        documentprocess_cc_df_shippingMarks: '', //标记唛码及备注
      keys: [
          "id",
          "formInstId",
          "attachedFiles",
          "documentprocess_cc_df_enterNO",
          "documentprocess_cc_df_hscode",
          "documentprocess_cc_df_company",
          "documentprocess_cc_df_exportPort",
          "documentprocess_cc_df_exportDate",
          "documentprocess_cc_df_applyDate",
          "documentprocess_cc_df_transport",
          "documentprocess_cc_df_transportTool",
          "documentprocess_cc_df_delNO",
          "documentprocess_cc_df_recordNO",
          "documentprocess_cc_df_tradeCountry",
          "documentprocess_cc_df_destCountry",
          "documentprocess_cc_df_specPort",
          "documentprocess_cc_df_yardGoods",
          "documentprocess_cc_df_license",
          "documentprocess_cc_df_tradeTerms",
          "documentprocess_cc_df_freight",
          "documentprocess_cc_df_premium",
          "documentprocess_cc_df_otherCharge",
          "documentprocess_cc_df_contractNO",
          "documentprocess_cc_df_numbers",
          "documentprocess_cc_df_cartons",
          "documentprocess_cc_df_grossWeight",
          "documentprocess_cc_df_netWeight",
          "documentprocess_cc_df_containerNO",
          "documentprocess_cc_df_attachBills",
          "documentprocess_cc_df_manufacturer",
          "documentprocess_cc_df_marks",
          "documentprocess_cc_df_table",
          "documentprocess_cc_df_domesticConsignor",
          "documentprocess_cc_df_exitCustoms",
          "documentprocess_cc_df_recordNumber",
          "documentprocess_cc_df_overseasConsignee",
          "documentprocess_cc_df_conveyanceAndVoyageNumber",
          "documentprocess_cc_df_supervisionMode",
          "documentprocess_cc_df_exemptingNature",
          "documentprocess_cc_df_departurePort",
          "documentprocess_cc_df_shippingMarks",
      ],
      prevMapCur:{
          documentprocess_cc_cdi_products: 'documentprocess_cc_df_productName',
          documentprocess_cc_cdi_description: 'documentprocess_cc_df_productDesc',
          documentprocess_cc_cdi_quantity: 'documentprocess_cc_df_quantityAndUnit',
          documentprocess_cc_cdi_price: 'documentprocess_cc_df_price',
          documentprocess_cc_cdi_lineAmount: 'documentprocess_cc_df_amount'
      }
    }
  },
  watch: {
    datas(newValue, oldValue){
      this.keys.forEach(key => {
          this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      requried: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {
    exportExcel
  }
}
</script>

<style lang="scss">
.declarationFormVue {

    padding: 20px;

    font-size: 14px;

    border: 1px solid #999;
    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    .center-input {
      input {
        text-align: center !important;
      }
    }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;

            input {
              border: none;
              outline: none;
              background-color: transparent;
              width: 90%;
              height: 36px;
             }

            .el-table__body-wrapper {
              overflow: hidden;
            }


            .cell {
              padding: 0px;
            }

            .has-unit {
              .el-row {
                border: none !important;
              }
              .el-col {
                border: none !important;
              }

              .el-input-number {
                width: 100% !important;
                min-width:auto !important;
              }

            }

            td {
              border: 1px solid #e6ebf5;
            }

            .el-input__inner {
              padding: 0;
              border: none;
              background: transparent;
            }

            .el-input__decrease,
            .el-input__increase {
                width: 20px;

                border: none;
                background: transparent;
            }

            .el-input-number {
              width: 100px !important;
              min-width: 100px;
            }

            .el-input {
                width: 100%;
            }

            h2 {
                text-align: center;
                padding: 10px 0;
            }
            .-null {
                height: 40px;
            }
            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
              table {
                width: 100%;
                border-collapse: collapse;
                td {
                  line-height: 40px;
                  text-align: center;
                  border: 1px solid #999;
                  border-top: none;
                  padding: 5px;
                }
              }
              .el-table--border td{
                border: 1px solid #e6ebf5;
                border-top: none;
              }
              .el-textarea__inner{
                border: none;
              }
            }
            .el-table {
                margin-top: 10px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

    }






}
</style>
